<template>
	<div>
		<!-- 首页 -->
		<div class="announcement">
			<img src="/static/jzbjyyxcx.png" alt="公告" class="announcement-image" />
		</div>

		<div class="container">
			<!-- 顶部导航栏 -->
			<div class="navbar">
				<div class="nav-item" @click="handleClick('zxdt')">
					<img src="/static/zxdt.png" alt="最新动态" class="jztj-image" />
					最新动态
				</div>
				<div class="nav-item" @click="handleClick('fwjs')">
					<img src="/static/user_index/fwjs.png" alt="服务介绍" class="jztj-image" />
					服务介绍
				</div>
				<div class="nav-item" @click="handleClick('jzyyy')">
					<img src="/static/user_index/jzyyy.png" alt="家政员预约" class="jztj-image" />
					家政员预约
				</div>
				<div class="nav-item" @click="handleClick('gywm')">
					<img src="/static/user_index/gywm.png" alt="关于我们" class="jztj-image" />
					关于我们
				</div>
				<!-- <div class="nav-item">关于我们</div> -->
			</div>

			<!-- 家政推荐部分 -->
			<div class="recommendation">
				<div style="height: 88rpx;" @click="handleClick('jzyyy')">
					<text style="font-weight: 600;font-size: 18px;">家政推荐</text>
					<div class="more-btn">更多>></div>
				</div>
				<scroll-view scroll-x="true" class="scroll-view-navbar">
					<div @click="tpdetails(item.id)" class="recommendation-item" v-for="item in recommendations"
						:key="item.name">
						<img :src="url()+item.imgpath" :alt="item.name" class="recommendation-image" />
						<div>{{ item.name }}</div>
					</div>
				</scroll-view>
			</div>

			<!-- 最新动态部分 -->
			<div class="news">
				<text style="font-weight: 600;font-size: 18px;">最新动态</text>
				<div style="margin-top: 15px;">
					<div class="news-item" v-for="item in news" :key="item.id" @click="xXNR(item.id,item.type)">
						<!-- <img :src="item.image" :alt="item.title" class="news-image" /> -->
						<img :src="url()+item.image" :alt="item.title" class="news-image" />
						<div style="float: right;width: 60%;">
							<div style="height: 70px;">
								<text class="news-title">{{ item.title }}</text><br />
								<text class="news-comment">{{ item.comment }}</text>
							</div>
							<div class="news-status">
								<text>{{ item.type }}</text>
							</div>
						</div>

					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		gonavigateTo,
		goswitchTab
	} from '@/request/wx.js';
	import {
		staffsel,
		showstate,
		url
	} from '@/request/api.js'

	function tpdetails(id) {
		gonavigateTo(`/pages/user/details/details?id=${id}`);
	}
	//家政推荐
	onMounted(async () => {
		try {
			const response = await staffsel();
			recommendations.value = response.data.data
			const req = await showstate();
			news.value = req.data.data.map(item => {
				return {
					id: item.id,
					image: item.cover,
					title: item.title,
					comment: item.introduce,
					type: item.classify
				};
			});
		} catch (error) {
			// 打印捕获到的错误
			console.error("请求失败:", error);
		}
	});
	// 定义点击事件处理函数
	const handleClick = (type) => {
		console.log(`按钮被点击了：${type}`);
		switch (type) {
			case 'zxdt':
				gonavigateTo(`/pages/user/index/zxdt`);
				break;
			case 'fwjs':
				gonavigateTo(`/pages/user/index/fwjs`);
				break;
			case 'jzyyy':
				goswitchTab(`/pages/user/jzyy/jzyy`);
				break;
			case 'gywm':
				gonavigateTo(`/pages/user/index/gywm`);
				break;
			default:
				break;
		}
	};

	const xXNR = (id, type) => {
		console.log(`按钮被点击了：${id}`);
		gonavigateTo(`/pages/user/index/xxnr?id=${id}&type=${type}`);
	}
	//家政推荐数组
	const recommendations = ref([]);

	const news = ref([]);
	// {
	// 	id: '12',
	// 	title: '家政服务中心简介',
	// 	image: '/static/jzfwzxjj.jpg',
	// 	comment: '第三方回家撒到了发生了的看法洒到了房间lksa',
	// 	type: '最新状态'
	// },
	// {
	// 	id: '13',
	// 	title: '春节放假通知',
	// 	image: '/static/logo.png',
	// 	comment: '可撒旦法拉萨的肌肤拉萨的肌肤了吉萨德结束 就',
	// 	type: '服务介绍'
	// },
</script>

<style scoped>
	.scroll-view-navbar {
		white-space: nowrap;
	}

	.container {
		padding: 10px;
		padding-top: 0px;
		/* background-color: #f0f0f0; */
	}

	.navbar {
		display: flex;
		justify-content: space-around;
		margin-bottom: 15px;
		width: 100%;
	}

	.nav-item {
		/* width: 130rpx; */
		padding: 0px 10px;
		width: 25%;
		text-align: center;
		font-size: 12px;
	}

	.recommendation {
		margin-bottom: 20px;
	}

	.recommendation-item {
		display: inline-block;
		margin-right: 10px;
		text-align: center;
	}

	.recommendation-item:last-child {
		display: inline-block;
		margin-right: 0px;
		text-align: center;
	}

	.recommendation-image {
		border-radius: 8px;
		width: 176rpx;
		height: 220rpx;
	}

	.jztj-image {
		width: 126rpx;
		height: 120rpx;
		margin-bottom: 5px;
		clip-path: inset(0 round 56rpx 60rpx 0 0);
	}

	.more-btn {
		color: #673AB7;
		font-weight: 600;
		float: right;
		/* transform: translate(420rpx, 0rpx); */
	}

	.news-item {
		margin-bottom: 15px;
	}

	.news-item:last-child {
		margin-bottom: 90px;
	}

	.news-title {
		font-size: 18px;
		font-weight: bold;
		/* height: 124rpx; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.news-comment {
		font-size: 14px;
		color: gray;
		margin-top: 3px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.news-status {
		float: right;
		font-size: 14px;
		color: #9E9E9E;
	}

	.news-image {
		width: 260rpx;
		height: 180rpx;
		border-radius: 8px;
	}

	/* .announcement {
		text-align: center;
		margin-top: 20px;
	} */

	.announcement-image {
		width: 100%;
	}
</style>